<template>
    <div class="trend-tab3">
            <p class="g-unit">收入: 万元，用户数: 万户</p>
           <div class="tableBox">
            <el-table
                v-loading="tableLoading1"
                :data="tableData1"
                height="85vh"
                style="width: 100%"
                class="tableTh28"
                border
                stripe
              
                ref="table"
            >
                <el-table-column
                    fixed
                    label="类别"
                    prop="verticalIndexName"
                    class-name="first-title"
                    min-width="160"
                ></el-table-column>
                <el-table-column  label="收入">
                    <el-table-column prop="HP040001" min-width="120" label="2019年"></el-table-column>
                    <el-table-column label="2020年">
                            <el-table-column label="1-11月累计完成" min-width="120" prop="HP040002"></el-table-column>
                            <el-table-column label="全年预计" min-width="120" prop="HP040003"></el-table-column>
                            <el-table-column label="同比(%)" min-width="120" prop="HP040004"></el-table-column>
                    </el-table-column>
                    <el-table-column label="2021年">
                        <el-table-column label="预算值" prop="HP040005"></el-table-column>
                        <el-table-column label="同比(%)" prop="HP040006"></el-table-column>
                        <el-table-column label="拉动(%)" prop="HP040007"></el-table-column>
                    </el-table-column>
                </el-table-column>

                <el-table-column label="用户/套餐（万户）">
                    <el-table-column label="2019年">
                        <el-table-column prop="HP040008" min-width="100" label="期末用户数"></el-table-column>
                        <el-table-column prop="HP040009" min-width="100" label="净增用户数"></el-table-column>
                        <el-table-column prop="HP040010" min-width="100" label="离网用户数"></el-table-column>
                        <el-table-column prop="HP040011" min-width="100" label="新增用户数"></el-table-column>
                    </el-table-column>
                    
                    <el-table-column label="2020年">
                        <el-table-column label="1-11月">
                            <el-table-column prop="HP040012" min-width="100" label="期末用户数"></el-table-column>
                            <el-table-column prop="HP040013" min-width="100" label="净增用户数"></el-table-column>
                            <el-table-column prop="HP040014" min-width="100" label="离网用户数"></el-table-column>
                            <el-table-column prop="HP040015" min-width="100" label="新增用户数"></el-table-column>
                        </el-table-column>
                        <el-table-column label="全年">
                            <el-table-column prop="HP040016" min-width="100" label="期末用户数"></el-table-column>
                            <el-table-column prop="HP040017" min-width="100" label="净增用户数"></el-table-column>
                            <el-table-column prop="HP040018" min-width="100" label="离网用户数"></el-table-column>
                            <el-table-column prop="HP040019" min-width="100" label="新增用户数"></el-table-column>
                        </el-table-column>
                    </el-table-column>
                     <el-table-column label="2021年">
                            <el-table-column prop="HP040020" min-width="100" label="期末用户数"></el-table-column>
                            <el-table-column prop="HP040021" min-width="100" label="净增用户数"></el-table-column>
                            <el-table-column prop="HP040022" min-width="100" label="离网用户数"></el-table-column>
                            <el-table-column prop="HP040023" min-width="100" label="新增用户数"></el-table-column>
                    </el-table-column>
                </el-table-column>

                <el-table-column label="ARPU值">
                    <el-table-column prop="HP040024" label="2019年"></el-table-column>
                    <el-table-column label="2020年">
                        <el-table-column prop="HP040025" label="1-11月"></el-table-column>
                        <el-table-column prop="HP040026" label="全年"></el-table-column>
                    </el-table-column>
                     <el-table-column prop="HP040027" label="2021年"></el-table-column>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
    import prefixAPI from "@/api/prefixAPI";
    import { getCookie } from "@/common/js/cookie";
    import { getSessionStorage } from "@/common/js/storage";
    import { $budgetAPI } from "@/api";
    import { mergeSpan } from "@/utils/mixin";
    export default {
        props: ['rowData', 'colData'],
        data() {
            return {
                tableLoading1: false,
                tableData1: [],
                titles1: [],
                spanArr: null,
            }
        },
        methods: {
           arraySpanMethod({ row, column, rowIndex, columnIndex }) {
            // if (columnIndex == 0  || columnIndex == 1 || columnIndex == 2) {
            //     return this.spanArr && this.spanArr[rowIndex][columnIndex];
            // }
        },
            init() {
                var that = this;

                // that.spanArr = mergeSpan(that.rowData[0], [
                //     "class1",
                //     "class2",
                //     "class3",
                //     "verticalIndexName"
                // ]);
                
                that.titles1 = that.colData;
                that.tableData1 = that.rowData[0];
                that.tableLoading1 = false;
            }
        },
        
    }
</script>

<style lang="scss" scoped>
.trend-tab1 {
  .first-title.is-leaf {
    position: relative;
    border-right: 1px solid #d7e5fb !important;
    .cell {
      color: #d7e5fb;
      height: 23px;
    }
  }
  .second-title.is-leaf {
    position: relative;
    border-right: 1px solid #d7e5fb !important;
    .cell {
      color: #d7e5fb;
        height: 23px;
    }
  }
  .third-title.is-leaf {
    position: relative;
    border-right: 1px solid #d7e5fb !important;
    .cell {
      color: #d7e5fb;
        height: 23px;
    }
  }
  .forth-title.is-leaf {
    overflow: visible;
    .cell {
      transform: translateX(-50%);
    }
  }
}
</style>